<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item :label="$t('ImageSimpleAdd_ImageSource')"  prop="imageUrl">
        <el-select v-model="form.imageUrl" placeholder="请选择镜像来源">
          <el-option label="DockerHub" value=""></el-option>
          <el-option :label="item.name" :value="item.url" v-for="item in hubdata" :key="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
      :label="$t('ImageSimpleAdd_ImageName')"
      prop="imageName"
      
      :rules="[
        { required: true, message: $t('ImageSimpleAdd_Name')}
      ]"
      >
        <el-input v-model.trim="form.imageName" :placeholder="$t('ImageSimpleAdd_Example')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="background: #067FB5; color: #fff;" size="small" @click="onSubmit()">{{this.item ? this.$t('ImageSimpleAdd_CreateImage') : this.$t('ImageSimpleAdd_PullImage')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import post from '@/utils/post'
import http from '@/utils/http'
import { Base64 } from 'js-base64' // 编码插件
export default {
  data () {
    return {
      hubdata: [],
      form: {
        imageUrl: '',
        imageName: ''
      }
    }
  },
  props: ['item'],
  mounted () {
    http({
      url: '/hubfind',
      method: 'GET',
      timeout: 2000000
    }).then(res => {
      this.hubdata = res.Data
    }).catch((err) => {
      return err
    })
  },
  methods: {
    // 处理提交事件
    onSubmit () {
      // 判断镜像是否为空
      if (this.form.imageName === '') {
        return this.$message({
          showClose: true,
          message: '镜像名称为空',
          type: 'error'
        })
      }
      // 显示转圈
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // ajax请求拉取镜像
      this.addimgae()
    },
    addimgae () {
      let docker = ''
      let name = this.form.imageName
      if (this.form.imageName.indexOf(':') === -1) {
        name = name + ':latest'
      }
      if (!this.item) {
        if (this.form.imageUrl) {
          const arr = this.hubdata.filter(item => {
            return item.url === this.form.imageUrl
          })
          const pulldata = {
            serveraddress: arr[0].url,
            username: arr[0].username,
            password: Base64.decode(arr[0].password)
          }
          const token = Base64.encode(JSON.stringify(pulldata))
          // 拉取私人仓库镜像
          docker = `curl -s -X POST --unix-socket /var/run/docker.sock --header "X-Registry-Auth: ${token}" http:/v1.40/images/create?fromImage=${name}`
        } else {
          docker = `curl --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/images/create?fromImage=${name}"` // 拉取镜像
        }
      } else {
        docker = `curl --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/commit?container=${this.item.Id}&repo=${name}"` // 从容器新建镜像
      }
      http({
        url: '/docker',
        method: 'POST',
        timeout: 600000000,
        data: { docker }
      }).then(res => {
        this.loading.close()
        if (res.Code !== 200) {
          return this.$message({
            showClose: true,
            message: '镜像拉取失败！',
            type: 'error'
          })
        }
        this.$message({
          showClose: true,
          message: '镜像拉取成功！',
          type: 'success'
        })
        this.$emit('Success')
      })
    }
  }
}
</script>
